<template>
	<view>
		<!-- 选项卡 -->
		<view class="orderTab_con">
			<u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" active-color="#327FE8" @change="tabChange">
			</u-tabs>
		</view>

		<view class="orderList_box">
			<view class="orderItem" v-for="(item,index) in orderList" :key="index" @click="orderDetail(item.id)">
				<view class="orderHead_con">
					<view class="orderSn">No.{{item.order_sn}}</view>
					<view class="orderStatus">{{item.status_str}}</view>
				</view>
				<view class="orderWrap_con">
					
					<view class="orderInfo">
						<view class="orderNum">商品数量：{{item.goodsList.length}}种商品</view>
						<view class="orderTotal">合计：{{item.integral}}积分</view>
					</view>
					<view class="orderTime">下单时间：{{item.add_time}}</view>
				</view>
			</view>

			<!-- 分页 -->
			<view class="dataEmpty_con">
				<!-- 数据为空 -->
				<u-empty v-if="orderList.length==0"></u-empty>
				<!-- 加载更多 -->
				<view class="loadmore_box" v-if="orderList.length>0">
					<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore" />
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 分页
				pages: 1,
				limit: 10,
				last_page: 0,

				// 加载更多
				loadStatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉或点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},

				// 选项卡
				tabList: [{
					name: '待发货',
					status: '10',
				}, {
					name: '待收货',
					status: '20',
				}, {
					name: '已完成',
					status: '30',
				}],
				tabCurrent: 0,
				tabStatus: '10',

				// 订单列表
				orderList: [],
			}
		},
		onLoad(option) {
			var _this=this;
		
			if(option.status){
				_this.tabStatus=option.status
				var tabList=_this.tabList;
				for(var i=0;i<tabList.length;i++){
					if(tabList[i].status==option.status){
						_this.tabCurrent=i
					}
				}
			}
		},
		onShow() {
			var _this = this;
			_this.pages = 1;
			_this.getOrderList();
		},
		onReady() {

		},
		onReachBottom() {
			var _this = this;
			_this.loadmore();
		},
		methods: {
			// 选项卡切换
			tabChange(index) {
				var _this = this;
				_this.tabCurrent = index;
				_this.tabStatus = _this.tabList[index].status;
				_this.pages = 1;
				_this.getOrderList();
			},

			// 获取订单列表
			getOrderList() {
				var _this = this;
				_this.$u.get('/api/shop.order/getList', {
					pages: _this.pages,
					limit: _this.limit,
					status: _this.tabStatus,
					
				}).then(res => {
					uni.hideLoading();
					console.log("==获取订单列表==");
					console.log(res);
					var orderList = _this.orderList;
					if (_this.pages == 1) {
						orderList = [];
					}
					_this.orderList = orderList.concat(res.data);

					// 分页状态更新
					_this.last_page = res.extend.last_page;
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loadmore';
				}).catch(res => {
					console.log(res);
				})
			},

			// 点击加载更多
			loadmore() {
				var _this = this;
				if (_this.pages >= _this.last_page) return;
				_this.loadStatus = 'loading';
				_this.pages++;
				setTimeout(() => {
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loading';
					uni.showLoading({
						title: '加载中'
					});
					_this.getOrderList();
				}, 2000)
			},

			// 订单详情
			orderDetail(order_id) {
				console.log(order_id)
				uni.navigateTo({
					url: './orderDetail?order_id=' + order_id
				})
			},

		}
	}
</script>

<style scoped>
	/* 订单列表 */
	.orderList_box {
		padding: 0 30rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.orderItem {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.orderHead_con {
		font-size: 28rpx;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.orderSn {
		flex: 2;
		font-size: 24rpx;
		color: #7D7E82;
	}

	.orderStatus {
		color: #FF3133;
	}
	
	.orderWrap_con {
		padding: 20rpx;
		overflow: hidden;
	}
	
	.orderShop{
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}
	
	.orderInfo{
		padding: 20rpx 0;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.orderNum{
		font-size: 28rpx;
		color: #333;
	}
	
	.orderTotal{
		font-size: 28rpx;
		color: #288aff;
	}
	
	.orderTime{
		font-size: 24rpx;
		color: #999;
	}
</style>
